<template>
  <div id="app">
    <!-- <x-file-viewer :options="{showMenu:true}"></x-file-viewer>
    <div class="pdf-mask"></div>
    <div class="x-drag-wrapper">
      <x-drag>
        <x-drag-item :options="options_1">文本内容</x-drag-item>
        <x-drag-item :options="options_1" @change="changeHandler">
          <x-curved-text :wordList="wordList" :width="curvedInfo.width" :height="curvedInfo.height"></x-curved-text>
        </x-drag-item>
      </x-drag>
    </div> -->
    <div class="x-curved-text-wrapper">
      <x-curved-text :wordList="wordList" :points="points" :pointsTotal="pointsTotal" :width="400" :height="200"></x-curved-text>
    </div>
    <div class="x-curved-text-wrapper">
      <x-curved-text-2 :wordList="wordList" :points="points2" :pointsTotal="pointsTotal" :width="400" :height="200"></x-curved-text-2>
    </div>
    <!-- <x-screenshot :type="type" :size="size" :options="{dependent: 'snapdom'}"></x-screenshot>
    <div class="x-video-wrapper">
      <x-video :options="options" :size="size"></x-video>
    </div>
    <x-button-group>
      <x-button @click="switchHandler('type')">type</x-button>
      <x-button @click="switchHandler('mode')">mode</x-button>
      <x-button @click="switchHandler('placement')">placement</x-button>
      <x-button @click="switchHandler('size')">size</x-button>
      <x-button @click="switchHandler('multiple')">multiple</x-button>
      <x-button @click="switchHandler('active')">active</x-button>
      <x-button @click="switchHandler('shape')">shape</x-button>
    </x-button-group>
    <x-drawboard :type="type" :size="size"></x-drawboard>
    <div style="width:800px;height:800px">
      <x-file-viewer :options="{showMenu:true}"></x-file-viewer>
    </div>
    <div style="width:400px;height:400px">
      <x-image-compare :options="{demoSrc: imageUrl, testSrc: imageUrl, toolsbarShow: false}"></x-image-compare>
    </div>
    <div>
      <x-share-bar :items="shareBtns"></x-share-bar>
    </div> -->
    <!-- <div style="width:650px;height:300px" v-for="(v,i) in cameraList" :key="i">
      <x-video-record :cameraId="v.deviceId" :options="{timeslice:5000}" @photoEnd="photoEndHandler"></x-video-record>
    </div>
    <img :src="imgSrc">
    <x-button @click="visible=true">召唤模态窗</x-button>
    <x-modal v-model="visible" :size="size">
      <div slot="header">标题</div>
      <div>测试内容</div>
    </x-modal>
    <div><x-star-bar index="5" size="20"></x-star-bar></div>
    <div><x-star-bar index="1" type="brown" disabled></x-star-bar></div>
    <div><x-star-bar index="3" size="24" type="primary"></x-star-bar></div>
    <div><x-star-bar index="4" size="24" type="success"></x-star-bar></div>
    <div><x-star-bar index="2" size="18" type="warning"></x-star-bar></div>
    <div><x-star-bar index="2" type="danger" fill></x-star-bar></div>
    <div><x-star-bar index="2" type="info"></x-star-bar></div>
    <div style="width:400px;height:200px">
      <x-image-upload ></x-image-upload>
    </div>
    <div style="width:400px;height:200px">
      <x-image-upload :options="{photoType:'idcard_front_1', photoLabel:'身份证人像面'}"></x-image-upload>
    </div>
    <div style="width:400px;height:200px">
      <x-image-upload :options="{photoType:'idcard_back_1', photoLabel:'身份证国徽面'}"></x-image-upload>
    </div>
    <div style="width:400px;height:200px">
      <x-image-upload :options="{photoType:'license', photoLabel:'身份证国徽面'}"></x-image-upload>
    </div>
    <div style="width:400px;height:200px">
      <x-battery></x-battery>
      <x-battery :percent="60"></x-battery>
      <x-battery :size="60"></x-battery>
      <x-battery :showText="false"></x-battery>
    </div>
    <x-battery mode="vertical"></x-battery>
    <x-battery mode="vertical" :showText="false"></x-battery>
    <x-battery :percent="60"></x-battery>
    <x-battery :size="60"></x-battery> -->
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      imgSrc: '',
      imageUrl: require('@/images/img.jpg'),
      type: 'primary',
      mode: 'horizontal',
      placement: 'top',
      size: 'small',
      visible: false,
      multiple: true,
      active: true,
      shape: 'circle',
      typeList: ['default', 'primary', 'info', 'success', 'warning', 'danger', 'brown'],
      modeList: ['horizontal', 'vertical'],
      placementList: ['top', 'bottom', 'left', 'right'],
      sizeList: ['small', 'default', 'large'],
      multipleList: [true, false],
      activeList: [false, true],
      shapeList: ['rhomb', 'circle'],
      curvedInfo: {
        width: 100,        // 拖拽元素宽度，默认为100
        height: 100,       // 拖拽元素高度，默认为100
      },
      options_1: {
        width: 300,        // 拖拽元素宽度，默认为100
        height: 300,       // 拖拽元素高度，默认为100
        x: 0,             // 拖拽元素的水平坐标，默认为0
        y: 0,             // 拖拽元素的垂直坐标，默认为0
        fontSize: 14,     // 字号，默认为14
        scale: 1,         // 初始化缩放比例，默认为1
        rotate: 0,        // 初始化旋转角度，默认为0
        controls: true,   // 是否显示操作杆，默认为false
        resizable: true,  // 是否可缩放，默认为false
        rotatable: true,  // 是否可旋转，默认为false
        dynamic: false,   // 是否大小自适应，默认为false
        scope: true,      // 拖拽范围是否有限制，默认为false
        unit: '%',       // 定位时使用什么单位，默认为px
      },
      options: {
        volume: 1,                    // 音量大小，默认为1
        preload: 'auto',              // 是否预加载，默认为auto
        autoplay: true,               // 是否自动播放，默认为false
        showMenu: true,               // 是否显示播放列表，默认为auto
        showMenuPoster: true,         // 是否显示播放列表poster，默认为false
        showMenuDelete: true,         // 是否显示播放列表清空按钮，默认为false
        autoHideToolsbar: false,      // 是否自动隐藏控制条，默认为false
        videoList: [                  // 视频列表
          {
            label: 'name',            // 视频名称
            url: '',                  // 视频地址（无urls时取url）
            urls: [                   // 视频地址列表（优先级高于url）
              { label: '标清', value: '/x-vue-ui/assets/1.mp4', type: '' },
              { label: '高清', value: '2', type: '' },
              { label: '超清', value: '3', type: '' }
            ],
            duration: '',             // 视频时长
            poster: '',               // 视频封面
            subtitles: [              // 字幕列表，字幕格式支持vtt和srt
              { label: '中文', value: '/x-vue-ui/assets/1.vtt', kind: 'subtitles', srclang: 'zh' },
              { label: '英文', value: '', kind: 'subtitles', srclang: 'en' }
            ]
          }
        ]
      },
      shareBtns: [
        {value:'weixin', text: '要分享的内容', callback: function (res) {console.log(res)}},
        {value:'qq', title: '分享的标题', url: '分享的链接'},
        {value:'sina', title: '分享的标题', url: '分享的链接', pic: '分享的图片', site: '显示分享来源', showcount: 0, desc: '分享的描述', summary: '分享摘要'},
        {value:'tieba', title: '分享的标题', url: '分享的链接', pic: '分享的图片'},
        {value:'douban', title: '分享的标题', url: '分享的链接', pic: '分享的图片'},
        {value:'renren', title: '分享的标题', url: '分享的链接'},
        {value:'kaixin', title: '分享的标题', url: '分享的链接', pic: '分享的图片', site: '显示分享来源', showcount: 0, style: 11}
      ],
      // wordList: [
      //   {
      //     text: 'hello',
      //     dy: '-0.5em',
      //     wordSpacing: 10,
      //     style: {
      //       fill: 'red', fontSize: 20, fontFamily: 'Arial', fontWeight: 'bold', fontStyle: 'italic',
      //     },
      //     letters: [
      //       {
      //         text: 'hello',
      //         style: {
      //           fill: 'green', fontSize: 20, fontFamily: 'Arial', fontWeight: 'bold', fontStyle: 'italic',
      //         }
      //       },
      //     ]
      //   }
      // ],
      // wordList: [
      //   { text: 'Custom', style: { fill: '#409EFF', fontSize: '20px' } },
      //   { text: 'Curve', style: { fill: '#67C23A', fontSize: '20px' } },
      //   { text: 'Shape', style: { fill: '#E6A23C', fontSize: '20px' } }
      // ],
      wordList: [
        {
          text: 'Letters',
          letters: [
            { text: 'L', style: { fill: 'red', fontSize: '28px' } },
            { text: 'e', style: { fill: 'orange', fontSize: '28px' } },
            { text: 't', style: { fill: 'yellow', fontSize: '28px' } },
            { text: 't', style: { fill: 'green', fontSize: '28px' } },
            { text: 'e', style: { fill: 'blue', fontSize: '28px' } },
            { text: 'r', style: { fill: 'indigo', fontSize: '28px' } },
            { text: 's', style: { fill: 'violet', fontSize: '28px' } }
          ]
        },
        {
          text: 'Letters',
          letters: [
            { text: 'L', style: { fill: 'red', fontSize: '28px' } },
            { text: 'e', style: { fill: 'orange', fontSize: '28px' } },
            { text: 't', style: { fill: 'yellow', fontSize: '28px' } },
            { text: 't', style: { fill: 'green', fontSize: '28px' } },
            { text: 'e', style: { fill: 'blue', fontSize: '28px' } },
            { text: 'r', style: { fill: 'indigo', fontSize: '28px' } },
            { text: 's', style: { fill: 'violet', fontSize: '28px' } }
          ]
        },
        {
          text: 'Letters',
          letters: [
            { text: 'L', style: { fill: 'red', fontSize: '28px' } },
            { text: 'e', style: { fill: 'orange', fontSize: '28px' } },
            { text: 't', style: { fill: 'yellow', fontSize: '28px' } },
            { text: 't', style: { fill: 'green', fontSize: '28px' } },
            { text: 'e', style: { fill: 'blue', fontSize: '28px' } },
            { text: 'r', style: { fill: 'indigo', fontSize: '28px' } },
            { text: 's', style: { fill: 'violet', fontSize: '28px' } }
          ]
        },
      ],
      points: { x0: 50, y0: 150, x1: 100, y1: 50, x2: 150, y2: 100, unit: 'px' },
      points2: [
        { x: 50, y: 150 },
        { x: 75, y: 100 },
        { x: 100, y: 50 },
        { x: 150, y: 100 }
      ],
      pointsTotal: 5,
      cameraList: []
    }
  },
  mounted () {
    // this.getCameraList()
  },
  methods: {
    changeHandler (info) {
      console.log(info)
      this.curvedInfo = {
        width: parseInt(info.width),
        height: parseInt(info.height),
      }
    },
    getCameraList () {
      this.cameraList = []
      if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
        //
      } else {
        navigator.mediaDevices.enumerateDevices().then((deviceInfos) => {
          this.cameraList = deviceInfos.filter(v => v.kind === 'videoinput')
        })
      }
    },
    switchHandler (type) {
      let len = this[`${type}List`].length
      let index = (this[`${type}List`].indexOf(this[type]) + 1) % len
      this[type] = this[`${type}List`][index]
    },
    photoEndHandler (data) {
      this.imgSrc = data
    }
  }
}
</script>

<style>
html,body,#app {height: 100%;}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  background-color: #3BC1AC;
  background-image: radial-gradient(circle at 100% 150%, #3BC1AC 24%, #42D2BB 25%, #42D2BB 28%, #3BC1AC 29%, #3BC1AC 36%, #42D2BB 36%, #42D2BB 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, #3BC1AC 24%, #42D2BB 25%, #42D2BB 28%, #3BC1AC 29%, #3BC1AC 36%, #42D2BB 36%, #42D2BB 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, #42D2BB 10%, #3BC1AC 11%, #3BC1AC 23%, #42D2BB 24%, #42D2BB 30%, #3BC1AC 31%, #3BC1AC 43%, #42D2BB 44%, #42D2BB 50%, #3BC1AC 51%, #3BC1AC 63%, #42D2BB 64%, #42D2BB 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, #42D2BB 5%, #3BC1AC 6%, #3BC1AC 15%, #42D2BB 16%, #42D2BB 20%, #3BC1AC 21%, #3BC1AC 30%, #42D2BB 31%, #42D2BB 35%, #3BC1AC 36%, #3BC1AC 45%, #42D2BB 46%, #42D2BB 49%, transparent 50%, transparent), radial-gradient(circle at 0 50%, #42D2BB 5%, #3BC1AC 6%, #3BC1AC 15%, #42D2BB 16%, #42D2BB 20%, #3BC1AC 21%, #3BC1AC 30%, #42D2BB 31%, #42D2BB 35%, #3BC1AC 36%, #3BC1AC 45%, #42D2BB 46%, #42D2BB 49%, transparent 50%, transparent);
  background-size: 100px 50px;
  position: relative;
}
.x-video-wrapper {
  height: 600px;
}
.x-drag-wrapper { width: 80%; height: 80%; margin: 10%; border: 1px dashed #ccc; }
.x-drag-item { background: pink; }
.x-curved-text {position: relative;z-index: 2;}
.pdf-mask {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 20px;
  z-index: 2;
}
  .x-curved-text-wrapper {
    width: 400px;
    height: 350px;
  }
</style>
